<template>
	<view class="page">
		<cu-custom bgColor="bg-theme" :isBack="true"><block slot="content text-white">订单</block></cu-custom>
		<scroll-view scroll-y="true">
			<view class="bg-img bg-theme banner" style="height: 220rpx;border-bottom-left-radius: 30rpx;border-bottom-right-radius: 70rpx;">
				<view class="flex align-center justify-center">
					<text class="text-white text-xl">{{order.active_title || ''}}</text>
				</view>
				<view class="flex align-center justify-between padding-xl text-white" style="width: 100%;height: 100%;padding-top: 0;">
					<view class="flex align-center text-lg" style="padding: 10rpx 20rpx 26rpx;">
						{{order.order_status_text || ''}}
					</view>
					<view class="flex align-center text-df" style="padding: 10rpx 20rpx 26rpx;"
						v-if="order.order_status == 'SHIP_YES'" @tap="getExpress(order.ship_no)">查看物流 >
					</view>
				</view>
			</view>
			<view class="bg-white radius20 margin-left-sm margin-right-sm padding" style="position: relative;margin-top: -60rpx;">
				<view class="flex align-center">
					<view class="">收货地址：</view>
					<view class="margin-left" style="flex: 1;">
						<view class="">
							<text>{{order.ship_name}}</text>
							<text class="margin-left ">{{order.ship_tel}}</text>
						</view>
						<view class="text-sm margin-top-sm" style="line-height:30upx;">
							{{order.ship_province|| ''}} {{order.ship_city|| ''}}{{order.ship_county|| ''}} {{order.ship_town|| ''}} {{order.ship_addr|| ''}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding">
				<view>
					<view class="text-333 ">
						<text>订单编号：</text><text class="margin-left-xs">{{order.order_sn}}</text>
					</view>
					<view class="text-333 margin-top-xs">
						<text>下单时间：</text><text class="margin-left-xs">{{order.create_time | unixToDate }}</text>
					</view>
					<view class="text-333 margin-top-xs">
						<text>实付金额：</text><text class="margin-left-xs" style="color:#F2854C" v-if="order.pay_money">￥{{order.pay_money | formatPrice}}</text>
					</view>
				</view>
			</view>
			<view class="description">
				<view class="content">
					<view class="grace-rich-text">
					    <rich-text type="text" :nodes="intro"></rich-text>
					</view>
				</view>
			</view>
			<view class="bg-lightGrey" style="height: 100rpx;"></view>
		</scroll-view>
		<view class="padding bg-white flex-1" style="position: fixed; bottom:0; width: 100%;">
			<view class="flex justify-between align-center">
				<view>
					<view class="text-333 text-df text-fw600">下载链氿APP领取旅游服务</view>
					<view class="flex align-end" style="margin-top: 10rpx;">
						<text class="text-333 text-df text-fw500">并領取链氿会员权益</text>
					</view>
				</view>
				<view class="flex" @tap="showModal">
					<text class="buy-btn bg-theme text-df">立即领取</text>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="izShowApp?'show':''" @tap="hideModal">
			<view class="cu-dialog margin bg-white">
				<view class="bg-white closeIcon"  @tap="hideModal">X</view>
				<view class="bg-white flex justify-center margin">
					<view class="bg-white flex justify-center align-center">
						<view class="text-lg text-333 text-fw500">App下载提示</view>
					</view>
				</view>
				<view class="bg-white flex justify-center margin-bottom">
					<view class="flex flex-direction justify-center" style="width: 86%;text-align: left;">
						<text class="text-df" style="line-height: 40rpx; color: #666;">您好！请复制链接到浏览器打开，下载链氿APP领取旅游服务及会员权益！下载链接 :</text>
						<text class="text-df" style="line-height: 40rpx; color: #666;">{{link}}</text>
					</view>
				</view>
				<view class="cu-bar bg-white flex justify-center" style="border-top: 1px solid #E1E1E1; border-bottom-left-radius: 10rpx; border-top-right-radius: 10rpx;">
					<view class="flex justify-between margin" style="width: 80%; padding:10rpx 0; border-radius: 10rpx;">
						<text class="text-333 text-sm text-bold">下次再说</text>
						<text class="text-sm text-bold" style="color:#C71717;" @tap="copyBtn(link)">去复制链接</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Tour_API from '@/api/tour.js' 
	import graceRichText from '@/common/richText.js'
	import * as Foundation from '@/utils/Foundation.js'
	let client_type = 'MINI'
	export default {
		data() {
			return {
				sn:'',
				order:{},
				intro:'',
				link:'https://app.chinalianjiu.com',
				izShowApp:false
			};
		},
		onLoad(e) {
			if(e.sn){
				this.sn = e.sn
			}
		},
		onShow() {
			this.getOrderDetail()
		},
		onBackPress() {
			this.clearOrder();
		},
		methods: {
			getOrderDetail(){
				Tour_API.getTourOrderDetail(this.sn).then(res =>{
					this.order = res
					this.intro = graceRichText.format(res.active_desc);
				})
			},
			showModal() {
				this.izShowApp = true
			},
			hideModal() {
				this.izShowApp = false
			},
			copyBtn(e) {
				let that = this
			    uni.setClipboardData({
			     //准备复制的数据
			      data: e,
			      success:(res)=>{
			        uni.showToast({
						icon:'none',
						title: '已成功复制,请到浏览器打开链接',
						duration:3000
			        });
			      },
				  complete() {
				  	that.izShowApp = false
				  }
			    })
			},
			getExpress(ship_no){
				uni.navigateTo({
					url:'/pages/order/logistics?ship_no='+ship_no
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.radius20{
	border-radius: 10rpx;
}
.overHidden{
	overflow: hidden;
}
.buy-btn{
	padding: 10rpx 20rpx 10rpx 28rpx;
	border-radius: 10rpx;
	overflow: hidden;
	font-size: 26rpx;
	letter-spacing:8rpx;
}
.grace-rich-text{
	padding:10upx 20upx;
}
/deep/.cu-dialog {
	overflow: visible;
}
.closeIcon{
	position: absolute;
	right: 0;
	top: -70rpx;
	width: 50rpx;
	height: 50rpx;
	background:rgba(255,255,255,0.4);
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 30rpx;
}
</style>
